<template>
<div class="tree-box">
  <a-tree
    ref="aTreeScrollRef"
    v-model="treeData"
    showCheckbox
    showInput
    defaultExpandAll
    overflow="auto"
    :showAddTree="false"
    @handleCheckChange="handleCheckChange"
    @handleNodeClick="handleNodeClick"
  >
  </a-tree>

</div>
</template>

<script setup lang="ts">
import aTree from "@/components/aTree/index.vue";
const aTreeScrollRef = ref();
const treeData = ref([
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        children: [
          {
            id: 9,
            label: "Level three 1-1-1",
          },
          {
            id: 10,
            label: "Level three 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    children: [
      {
        id: 5,
        label: "Level two 2-1",
      },
      {
        id: 6,
        label: "Level two 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    children: [
      {
        id: 7,
        label: "Level two 3-1",
      },
      {
        id: 8,
        label: "Level two 3-2",
      },
    ],
  },
]);
const addTreeValue = ref('')
function handleNodeClick(data) {
  console.log('-------')
}
function handleCheckChange(data, checked, indeterminate) {
  // console.log(data, checked, indeterminate);
  // console.log("", aTreeScrollRef.value.treeRef.getCheckedNodes());
}

</script>

<style lang="scss" scoped>
.tree-box {
  height: 200px;
  overflow: hidden;
}
</style>